<template>
    <div class="table_box">
        <TableCard title="星级酒店管理" :table_data="table_data" :table_item="table_item" :user="'hotel'" @SizeChange="SizeChange"
            @currentPage="currentPage" @is_add_dialog_visible="is_add_dialog_visible" @row_id="row_id" @add="add"
            :total="total" :loading="loading" />
        <el-dialog title="星级酒店信息维护" :visible.sync="add_dialog_visible" center width="50%">
            <el-form :model="add_form" label-position="right" :rules="rules" ref="add_form_ref">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="酒店名"><el-input v-model="add_form.name"
                                autocomplete="off"></el-input></el-form-item>
                    </el-col>
                    <el-col :span="12"> <el-form-item label="地址"> <el-input v-model="add_form.location"
                                autocomplete="off"></el-input> </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24"> <el-form-item label="星级" size="large"> <el-rate v-model="add_form.star" show-text
                                :texts="['一星', '二星', '三星', '四星', '五星']"></el-rate></el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12"> <el-form-item label="总共车位"> <el-input-number v-model="add_form.parking_space"
                                :step="1" :min="0"></el-input-number> </el-form-item>
                    </el-col>
                    <el-col :span="12"><el-form-item label="当前车位"> <el-input-number v-model="add_form.current_parking"
                                :step="1" :min="0"></el-input-number> </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12"> <el-form-item label="最大容量"> <el-input-number v-model="add_form.capacity" :step="1"
                                :min="0" :max="10000"></el-input-number></el-form-item>
                    </el-col>
                    <el-col :span="12"> <el-form-item label="当前人数"> <el-input-number v-model="add_form.current_people"
                                :step="1" :min="0" :max="10000"></el-input-number> </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24"> <el-form-item label="介绍"> <el-input v-model="add_form.introduction"
                                autocomplete="off" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_dialog_visible = false" size="medium">取 消</el-button>
                <el-button type="primary" @click="submit" size="medium">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import TableCard from '@/components/reusable_components/table_card.vue'
import { rules } from '@/utils/rules';
export default {
    components: {
        TableCard,
    },

    data() {
        return {
            total: 0,
            table_item: [
                // { key: 'index', value: '序号', default: '' },
                { key: 'name', value: '酒店', default: '' },
                { key: 'star', width: '75', value: '星级', default: '' },
                { key: 'location', width: '250', value: '地址', default: '' },
                { key: 'parking_space', value: '总车位', default: '' },
                { key: 'current_parking', value: '剩余车位', default: '' },
                { key: 'capacity', value: '容量', default: '' },
                { key: 'current_people', value: '当前容量', default: '' },
                { key: 'credit', value: '诚信状况', default: '' },
            ],
            table_data: [],
            pageSize: 10,
            current_page: 1,
            add_dialog_visible: false,
            delete_row: 0,
            row_index: 0,
            // 新增
            add_form: {
                id: 0,
                name: '',
                star: 0,
                location: '',
                parking_space: '',
                current_parking: '',
                capacity: '',
                current_people: '',
                credit: 0,
                introduction: '',
            },
            rules: null,

            is_add: false,
            loading: true

        }
    },

    mounted() {
        this.SizeChange(this.pageSize);
        this.currentPage(this.current_page);
    },

    created() {
        this.rules = rules
        this.get_hotels()
    },

    methods: {

        // 根据子组件传来的信息，显示/关闭对话框
        is_add_dialog_visible(val) {
            this.add_dialog_visible = val
        },

        // 获取子组件传来的数据，当分页数据变化时，发送请求
        async SizeChange(size) {
            this.pageSize = size;
            this.get_hotels()
        },

        async currentPage(page) {
            this.current_page = page;
            this.get_hotels()
        },
        async get_total_number() {
            try {
                const res = await this.$http.get("/findTotalNumberOfHotels");
                if (res.data.code === 2000) {
                    this.total = res.data.data
                }
            } catch (error) {
                // console.log(error);
            }
        },
        async get_hotels() {
            this.loading = true
            try {
                const res = await this.$http.get('/findPageHotels', {
                    params: {
                        index: this.current_page,
                        pagesize: this.pageSize
                    }
                });
                this.table_data = res.data.data
                this.get_total_number()
                this.loading = false
            } catch (error) { }
        },

        // 获取子组件传来的row_id
        row_id(val) {
            this.row_index = val
            this.add_form = this.table_data.find(item => item.id === val)
        },

        add(val) {
            this.is_add = val
        },

        async submit() {
            if (this.is_add)
                try {
                    const res = await this.$http.post('/addHotels', {
                        id: this.row_index + '',
                        name: this.add_form.name,
                        star: this.add_form.star,
                        location: this.add_form.location,
                        parking_space: this.add_form.parking_space,
                        current_parking: this.add_form.current_parking,
                        capacity: this.add_form.capacity,
                        current_people: this.add_form.current_people,
                        credit: this.add_form.credit,
                        introduction: this.add_form.introduction,
                        img: '',
                        latitude: 0,
                        longitude: 0,
                    });
                    // 成功后关闭窗口
                    if (res.data.code === 2000) {
                        this.$message.success('成功！')
                        this.$router.go(0)
                    } else if (res.data.code === 4000) {
                        this.$message.error('修改失败！')
                    } else if (res.data.code === 6000) {
                        this.$message.warning('您没有修改任何东西！')
                    } else {
                        this.$message.error('出现错误啦！')

                    }
                    this.add_dialog_visible = false
                } catch (error) { }
            else
                try {
                    const res = await this.$http.put('/updateAttractionsAndHotels', {
                        id: this.row_index + '',
                        name: this.add_form.name,
                        star: this.add_form.star,
                        location: this.add_form.location,
                        parking_space: this.add_form.parking_space,
                        current_parking: this.add_form.current_parking,
                        capacity: this.add_form.capacity,
                        current_people: this.add_form.current_people,
                        credit: this.add_form.credit,
                        introduction: this.add_form.introduction,
                        img: '',
                        latitude: 0,
                        longitude: 0,
                    });
                    // 成功后关闭窗口
                    if (res.data.code === 2000) {
                        this.$message.success('成功')
                        this.$router.go(0)
                    } else if (res.data.code === 4000) {
                        this.$message.error('修改失败！')
                    } else if (res.data.code === 6000) {
                        this.$message.warning('您没有修改任何东西！')
                    } else {
                        this.$message.error('出现错误啦！')

                    }
                    this.add_dialog_visible = false
                } catch (error) { }
        },

    },

}
</script>

<style lang="less" scoped>
.table_box {
    width: 100%;
    height: 100%;
}

.el-input {
    display: inline-block;
}
</style>